<template>
  <view class="content">
    <TitlePage title="我的" :isSearch="false"></TitlePage>
    <view class="user-box" :style="'height: calc(100vh - ' + statusBarHeight + 'px);'">
      <view class="user-info">
        <view class="user-img">
          <image
            class="img-box"
            :src="`${info.member_head}` || 'https://images.tongzhuangkc.com/tz/default-user.png'"
          />
          <view class="img-icon" :class="info.vip_type === 1 ? 'vip' : info.vip_type === 2 ? 'active' : ''"></view>
        </view>
        <view class="info-box" @click="goPage('info')">
          <view class="info-name">
            <text class="name">{{ info.member_name }}</text>
          </view>
          <view class="info-phone">
            <view class="phone-box">
              <icon class="icon"></icon>
              <text>{{ info.member_mobile }}</text>
            </view>
          </view>
        </view>
        <view class="my-shop" @click="goShop(info.member_id)">我的商铺</view>
      </view>
      <view class="vip-banner" @click="goVip">
        <image class="banner" v-if="info.vip_is_renew === 0" src="https://images.tongzhuangkc.com/tz/vip-banner.png" />
        <template v-else>
          <image
            class="banner vip"
            @click="goPlatForm('vip')"
            src="https://images.tongzhuangkc.com/tz/vip-banner1.png"
          />
          <text>{{ info.vip_end_time }}到期，剩余{{ info.left_day }}天</text>
        </template>
      </view>
      <view class="user-tab">
        <view class="tab-list" @click="goPage('publish')">
          <image class="tab-img" src="https://images.tongzhuangkc.com/tz/fabu.png" />
          <text>我的发布</text>
        </view>
        <view class="tab-list" @click="goPage('coupon')">
          <image class="tab-img" src="https://images.tongzhuangkc.com/tz/youhui.png" />
          <text>优惠券</text>
        </view>
        <view class="tab-list" @click="goPage('message')">
          <image class="tab-img" src="https://images.tongzhuangkc.com/tz/xiaoxi.png" />
          <text>我的消息</text>
        </view>
        <view class="tab-list" @click="goPage('expense')">
          <image class="tab-img" src="https://images.tongzhuangkc.com/tz/xiaofei.png" />
          <text>消费记录</text>
        </view>
      </view>
      <view class="line"></view>
      <view class="platform">
        <view class="title">平台功能</view>
        <view class="platform-box">
          <view class="platform-list" @click="goPlatForm('vip')">
            <image class="platform-img" src="https://images.tongzhuangkc.com/tz/huiyuantequan.png" />
            <text>会员特权</text>
          </view>
          <view class="platform-list" @click="goPlatForm('exhibit')">
            <image class="platform-img" src="https://images.tongzhuangkc.com/tz/zuanzhan.png" />
            <text>首页钻展</text>
          </view>
          <view class="platform-list" @click="goPlatForm('hot')">
            <image class="platform-img" src="https://images.tongzhuangkc.com/tz/resou.png" />
            <text>上热搜</text>
          </view>
          <view class="platform-list" @click="goPlatForm('top')">
            <image class="platform-img" src="https://images.tongzhuangkc.com/tz/zhiding.png" />
            <text>置顶</text>
          </view>
          <view class="platform-list" @click="goPlatForm('customer')">
            <image class="platform-img" src="https://images.tongzhuangkc.com/tz/kefu.png" />
            <text>平台客服</text>
          </view>
        </view>
      </view>
      <view class="line"></view>
      <view class="serve">
        <view class="title">个人服务</view>
        <view class="serve-box">
          <view class="serve-list" @click="officialHandle"
            ><image class="serve-img" src="https://images.tongzhuangkc.com/tz/guanzhu.png" />关注公众号
          </view>
          <view class="serve-list" @click="goPage('advice')"
            ><image class="serve-img" src="https://images.tongzhuangkc.com/tz/yijian.png" />意见反馈
          </view>
          <view class="serve-list" @click="wxHandle"
            ><image class="serve-img" src="https://images.tongzhuangkc.com/tz/anquan.png" />账号与安全
          </view>
        </view>
      </view>
    </view>
    <van-overlay :show="isOfficial">
      <Official @close="officialHandle"></Official>
    </van-overlay>
    <TabBar :currentPage="4"></TabBar>
  </view>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import TabBar from '@/components/tabbar/index'
import TitlePage from '@/components/title/index'
import Official from '@/components/official/index'
import { getMemberInfo } from '@/http/user'
import { onShow } from '@dcloudio/uni-app'
export default {
  components: {
    TabBar,
    TitlePage,
    Official,
  },
  setup() {
    const state = reactive({
      statusBarHeight: 0,
      isOfficial: false,
      info: {},
    })
    // 跳转编辑资料
    const goPage = (type) => {
      uni.navigateTo({
        url: `/subpackage-user/${type}/index`,
      })
    }
    const goPlatForm = (type) => {
      uni.navigateTo({
        url: `/subpackage-platform/${type}/index`,
      })
    }
    // 修改公众号弹窗状态
    const officialHandle = () => {
      state.isOfficial = !state.isOfficial
    }
    const wxHandle = () => {
      uni.navigateTo({
        url: `/pages/login/index`,
      })
    }
    const goShop = (id) => {
      uni.navigateTo({
        url: `/subpackage-goods/shop/index?id=${id}`,
      })
    }
    // 获取用户信息
    const getUserInfo = async () => {
      const { data } = await getMemberInfo()
      state.info = data
    }
    const goVip = () => {
      uni.navigateTo({
        url: `/subpackage-platform/vip/index`,
      })
    }
    onShow(() => {
      getUserInfo()
      uni.getSystemInfo({
        success: function (res) {
          let safeAreaTop = res.safeAreaInsets.top === 20 ? 0 : res.safeAreaInsets.top
          let safeAreaBot = res.safeAreaInsets.bottom !== 0 ? res.safeAreaInsets.bottom : 20
          state.statusBarHeight = safeAreaTop + safeAreaBot + 98
        },
      })
    })
    return {
      ...toRefs(state),
      goPage,
      goPlatForm,
      officialHandle,
      wxHandle,
      goShop,
      goVip,
    }
  },
}
</script>

<style lang="scss">
.content {
  background: #fff url('https://images.tongzhuangkc.com/tz/pc-bg.png') no-repeat top center;
  background-size: 100% 562rpx;
  height: 100vh;
}

.user-box {
  overflow-y: auto;
  .user-info {
    display: flex;
    padding: 50rpx 32rpx 32rpx;
    justify-content: space-between;
    position: relative;
    .user-img {
      position: relative;
      width: 120rpx;
      height: 120rpx;
      .img-icon {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        bottom: 0;
        right: 0;
        &.vip {
          background: url('https://images.tongzhuangkc.com/tz/vip.png') no-repeat;
          background-size: 100% 100%;
        }
        &.active {
          background: url('https://images.tongzhuangkc.com/tz/vip2.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      .img-box {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info-box {
      width: calc(100% - 136rpx);
      .info-name {
        font-size: 40rpx;
        font-weight: 500;
        max-width: 50%;
        color: #2b303b;
        line-height: 48rpx;
        height: 48rpx;
        padding-right: 40rpx;
        background: url('https://images.tongzhuangkc.com/tz/right.png') no-repeat right center;
        background-size: 32rpx 32rpx;
        .name {
          @include text-ellipsis(1);
        }
      }
    }
    .info-phone {
      display: inline-block;
    }
    .phone-box {
      display: flex;
      padding: 4rpx 8rpx 4rpx 4rpx;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      .icon {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-right: 6rpx;
        background: #71d1f8 url('https://images.tongzhuangkc.com/tz/shouji.png') no-repeat center center;
        background-size: 28rpx 28rpx;
      }
      text {
        font-size: 28rpx;
        color: #7b8595;
      }
    }
    .my-shop {
      position: absolute;
      right: 0;
      top: 80rpx;
      width: 128rpx;
      height: 48rpx;
      font-size: 24rpx;
      color: #fff;
      text-align: center;
      line-height: 48rpx;
      background: linear-gradient(90deg, #38acff 0%, #387bff 100%);
      box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(56, 122, 255, 0.2);
      border-radius: 24rpx 0rpx 0rpx 24rpx;
    }
  }
  .vip-banner {
    position: relative;
    padding: 0 32rpx;
    .banner {
      width: 100%;
      height: 257rpx;
      &.vip {
        height: 343rpx;
      }
    }
    text {
      position: absolute;
      left: 85rpx;
      bottom: 40rpx;
      height: 32rpx;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 32rpx;
    }
  }
  .user-tab {
    padding: 16rpx 64rpx;
    display: flex;
    justify-content: space-between;
    .tab-list {
      width: 112rpx;
      text-align: center;
      .tab-img {
        width: 112rpx;
        height: 112rpx;
      }
      text {
        font-weight: 500;
        font-size: 28rpx;
        color: #3f4555;
      }
    }
  }
  .line {
    height: 16rpx;
    background: #f5f6fa;
  }
  .platform {
    padding: 32rpx 0;
    .title {
      padding-left: 32rpx;
      height: 48rpx;
      font-size: 32rpx;
      line-height: 48rpx;
      color: #000;
    }
    .platform-box {
      display: flex;
      justify-content: space-between;
      .platform-list {
        width: 150rpx;
        text-align: center;
        .platform-img {
          display: block;
          margin: 24rpx auto 16rpx;
          width: 64rpx;
          height: 64rpx;
        }
        text {
          height: 40rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #2b303b;
          line-height: 40rpx;
        }
      }
    }
  }
  .serve {
    padding: 32rpx 0;
    .title {
      padding-left: 32rpx;
      height: 48rpx;
      font-size: 32rpx;
      line-height: 48rpx;
      color: #000;
    }
    .serve-box {
      padding: 0 32rpx;
      .serve-list {
        padding: 8rpx 32rpx 8rpx 0;
        margin-top: 24rpx;
        height: 40rpx;
        font-size: 28rpx;
        color: #2b303b;
        line-height: 40rpx;
        background: url('https://images.tongzhuangkc.com/tz/right.png') no-repeat right center;
        background-size: 32rpx 32rpx;
        .serve-img {
          width: 40rpx;
          height: 40rpx;
          margin-right: 16rpx;
        }
      }
    }
  }
}
</style>
